import React, { Component } from 'react'

// Routes: 理解为 vue-router 中的 router-view 路由出口
// Route: 理解为路由的规则配置
import { Routes, Route, Navigate, NavLink } from 'react-router-dom'

import Home from './views/home/Inedx'
import Kind from './views/kind/Inedx'
import Cart from './views/cart/Inedx'
import User from './views/user/Inedx'

import Footer from './components/Footer'

// 路由懒加载
const NotFound = React.lazy(()=> import('./views/error/Inedx'))
const Detail = React.lazy(()=>{
  return import('./views/detail/Inedx')
})
const Login = React.lazy(()=> import('./views/login/Inedx'))

export default class App extends Component {
  render() {
    return (
      <div className='container'>
          
          {/* <div className='box'>
            <header className='header'> 头部 </header>
            <div className='content'>内容</div>
          </div> */}

          <Routes>
            {/* 如果需要进行路由的重定向，可以使用 Navigate 进行配置 */}
            <Route path='/' element={<Navigate to='/home' />} /> 

            <Route path='/home' element={<Home />} />
            <Route path='/kind' element={<Kind />} />
            <Route path='/cart' element={<Cart />} />
            <Route path='/user' element={<User />} />

            {/* 规定路由跳转的时候需要携带一个动态参数 :proid */}
            <Route path='/detail/:proid' element={<Detail />} />
            <Route path='/login' element={<Login />} />

            {/* 配置 404 页面 */}
            <Route path='*' element={<NotFound />} />
          </Routes>


          <Routes>

            <Route path='/home' element={<Footer />} />
            <Route path='/kind' element={<Footer />} />
            <Route path='/cart' element={<Footer />} />
            <Route path='/user' element={<Footer />} />

            <Route path='*' element={<></>} />
          </Routes>

          

      </div>
    )
  }
}
